<template>
    <el-form ref="formRef" :model="formData" label-width="120px">
        <!-- 文本转语音 -->
        <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">文本转语音</div>
            <el-form-item label="是否开启">
                <div>
                    <el-switch
                        v-model="formData.speech.is_open"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <div class="form-tips">开启/关闭语音播报功能，关闭后智能体播报设置不再显示</div>
                </div>
            </el-form-item>
            <el-form-item label="语音通道">
                <div>
                    <el-radio-group v-model="formData.speech.channel">
                        <el-radio
                            v-for="(value, key) in formData.speech.configs"
                            :key="key"
                            :value="key"
                        >
                            {{ value.name }}
                        </el-radio>
                    </el-radio-group>
                    <template v-if="formData.speech.channel !== 'browser'">
                        <div class="form-tips">
                            <div class="flex items-center leading-none">
                                使用前请先前往【设置】-【密钥配置】-【语音输出】添加Key
                                <router-link to="/ai/secret">
                                    <el-button link type="primary">前往设置</el-button>
                                </router-link>
                            </div>
                        </div>
                    </template>
                    <template v-if="formData.speech.channel === 'xunfei'">
                        <div class="form-tips">
                            <div class="flex items-center leading-none">
                                <div>如果您已开通，可直接使用；如果未开通，点击</div>
                                <a
                                    href="https://console.xfyun.cn/services/uts"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <el-button link type="primary"> 前往开通 </el-button>
                                </a>
                            </div>
                        </div>
                    </template>
                </div>
            </el-form-item>
            <el-form-item label="通道状态">
                <div class="w-[280px]">
                    <el-select
                        v-model="formData.speech.configs[formData.speech.channel].open"
                        :disabled="formData.speech.channel === 'browser'"
                    >
                        <el-option label="启用" :value="1" />
                        <el-option label="禁用" :value="0" />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="语音模型">
                <div class="w-[280px]">
                    <el-select v-model="formData.speech.configs[formData.speech.channel].model">
                        <el-option
                            v-for="(i, key) in formData.speech.configs[formData.speech.channel].models"
                            :key="key"
                            :label="i"
                            :value="key"
                        />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="发音人">
                <div class="w-[280px]">
                    <el-select v-model="formData.speech.configs[formData.speech.channel].voice">
                        <el-option
                            v-for="(i, key) in formData.speech.configs[formData.speech.channel].pronounces"
                            :key="key"
                            :label="i"
                            :value="key"
                        />
                    </el-select>
                </div>
            </el-form-item>
            <template v-if="formData.speech.channel === 'browser'">
                <el-form-item label="发音语速">
                    <div class="w-[280px]">
                        <el-slider
                            v-model="formData.speech.configs[formData.speech.channel].speed"
                            :min="0.1"
                            :max="10"
                            :step="0.1"
                        />
                        <div class="form-tips">语速值越大语速越快，可选[0.1-10]，默认0.1</div>
                    </div>
                </el-form-item>
            </template>
            <template v-if="formData.speech.channel === 'openai'">
                <el-form-item label="发音语速">
                    <div class="w-[280px]">
                        <el-slider
                            v-model="formData.speech.configs[formData.speech.channel].speed"
                            :min="0.25"
                            :max="4.0"
                            :step="0.01"
                        />
                        <div class="form-tips">语速值越大语速越快，可选[0.25-4.0]，默认1</div>
                    </div>
                </el-form-item>
                <el-form-item label="自定义API域名">
                    <div class="w-[280px]">
                        <el-input
                            placeholder="https://api.openai.com"
                            v-model="formData.speech.configs[formData.speech.channel].agency_api"
                        />
                        <div class="form-tips">
                            反向代理API域名，国内服务器请填写。
                        </div>
                    </div>
                </el-form-item>
            </template>
            <template v-if="formData.speech.channel === 'xunfei'">
                <el-form-item label="发音语速">
                    <div class="w-[280px]">
                        <el-slider
                            v-model="formData.speech.configs[formData.speech.channel].speed"
                            :min="10"
                            :max="100"
                            :step="1"
                        />
                        <div class="form-tips">语速值越大语速越快，可选[10-100]，默认50</div>
                    </div>
                </el-form-item>
                <el-form-item label="音量大小">
                    <div class="w-[280px]">
                        <el-slider
                            v-model="formData.speech.configs[formData.speech.channel].volume"
                            :min="10"
                            :max="100"
                            :step="1"
                        />
                        <div class="form-tips">设置音量大小，可选[10-100]，默认50</div>
                    </div>
                </el-form-item>
            </template>
        </el-card>

        <!-- 语音转文本 -->
        <el-card shadow="never" class="!border-none mt-4">
            <div class="text-xl font-medium mb-[20px]">语音转文本</div>
            <el-form-item label="是否开启">
                <div>
                    <el-switch
                        v-model="formData.transfer.is_open"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <div class="form-tips">开启/关闭语音输入功能，默认关闭</div>
                </div>
            </el-form-item>
            <el-form-item label="语音通道">
                <div>
                    <el-radio-group v-model="formData.transfer.channel">
                        <el-radio
                            v-for="(value, key) in formData.transfer.configs"
                            :key="key"
                            :value="key"
                        >
                            {{ value.name }}
                        </el-radio>
                    </el-radio-group>
                    <div class="form-tips">
                        <div class="flex items-center leading-none">
                            为确保功能正常使用，请先前往【Key池管理】-【语音输入】添加Key
                            <router-link to="/ai/secret">
                                <el-button link type="primary">前往设置</el-button>
                            </router-link>
                        </div>
                    </div>
                    <template v-if="formData.transfer.channel === 'xunfei'">
                        <div class="form-tips">
                            <div class="flex items-center leading-none">
                                <div>如果您已开通，可直接使用；如果未开通，点击</div>
                                <a
                                    href="https://console.xfyun.cn/services/tts"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <el-button link type="primary"> 前往开通 </el-button>
                                </a>
                            </div>
                        </div>
                    </template>
                </div>
            </el-form-item>
            <el-form-item label="语音模型">
                <div class="w-[280px]">
                    <el-select v-model="formData.transfer.configs[formData.transfer.channel].model">
                        <el-option
                            v-for="(i, key) in formData.transfer.configs[formData.transfer.channel].models"
                            :key="key"
                            :label="i"
                            :value="key"
                        />
                    </el-select>
                </div>
            </el-form-item>
            <template v-if="formData.transfer.channel === 'openai'">
                <el-form-item label="自定义API域名" >
                    <div class="w-[280px]">
                        <el-input
                            placeholder="https://api.openai.com/v1"
                            v-model="formData.transfer.configs[formData.transfer.channel].agency_api"
                        />
                        <div class="form-tips">
                            反向代理API域名，国内服务器请填写。
                        </div>
                    </div>
                </el-form-item>
            </template>
        </el-card>

        <!-- 保存按钮 -->
        <el-card shadow="never" class="!border-none mt-4">
            <el-button
                v-perms="['setting:ai:voice:save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存配置</el-button>
        </el-card>
    </el-form>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import aiVoiceApi from '@/api/setting/ai/voice'

const loading = ref(false)
const formRef = ref()
const formData: any = reactive({
    // 文本转语音
    speech: {
        is_open: 0,
        channel: 'xunfei',
        configs: {
            browser: {
                open: 1,
                name: '浏览器',
                model: 'browser',
                voice: 'utterance',
                speed: 1,
                volume: 1,
                models: {'browser': 'browser'},
                pronounces: {}
            },
            xunfei: {
                open: 1,
                name: '科大讯飞',
                model: 'personify',
                voice: 'x4_lingxiaoxuan_oral',
                speed: 50,
                volume: 50,
                models: {},
                pronounces: {}
            },
            openai: {
                open: 1,
                name: 'openAi-TTS',
                model: 'tts-1',
                voice: 'alloy',
                speed: 0.25,
                volume: 0,
                agency_api: '',
                models: {},
                pronounces: {}
            }
        }
    },
    // 语音转文本
    transfer: {
        is_open: 0,
        channel: 'xunfei',
        configs: {
            xunfei: {
                name: '科大讯飞',
                model: 'rtasr',
                models: {}
            },
            openai: {
                name: 'openAi-TTS',
                model: 'whisper-1',
                models: {}
            }
        }
    }
})

/**
 * 查询配置参数
 */
const queryConfigs = async (): Promise<void> => {
    const data = await aiVoiceApi.detail()
    Object.assign(formData, data)
}

/**
 * 提交修改参数
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()

    loading.value = true
    await aiVoiceApi.save(formData)
        .finally(() => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        })

    await queryConfigs()
    feedback.msgSuccess('保存成功')
}

onMounted(async () => {
    await queryConfigs()
})
</script>
